<template>
    <br>
    <a-button type="primary" @click="CreateUser">
        <template #icon>
            <PlusOutlined />
        </template>
        创建用户
    </a-button>
    <br> <br>
    <a-table size="small" :data-source="UserData" :pagination="false">
        <a-table-column key="username" dataIndex="username" title="用户名" />
        <a-table-column key="nickname" dataIndex="nickname" title="昵称" />
        <a-table-column key="desable" width="140px" dataIndex="desable" title="状态">
            <template #default="{ record }">
                <a-tag color="#f50" v-if="record.desable">禁用</a-tag>
                <a-tag color="#2db7f5" v-else>启用</a-tag>
            </template>
        </a-table-column>
        <a-table-column key="permission" width="140px" dataIndex="permission" title="权限">
            <template #default="{ record }">
                {{ distMapping[record.permission] }}
            </template>
        </a-table-column>
        <a-table-column key="createDate" width="220px" dataIndex="createDate" title="创建时间">
            <template #default="{ record }">
                {{ dayjs(record.createDate).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
        </a-table-column>
        <a-table-column key="action" width="120px" title="操作">
            <template #default="{ record }">
                <a-button type="primary" size="small" @click.stop="UpDateUser(record)">修改</a-button>
            </template>
        </a-table-column>
    </a-table>
    <a-modal v-model:visible="showCreateModel" title="创建用户" :footer="null" destroyOnClose :maskClosable="false">
        <UserFromVue :user="UserInfo" @CloseModel="CloseModel" />
    </a-modal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import UserFromVue from './UserFrom.vue';
import { PlusOutlined } from '@ant-design/icons-vue'
import dayjs from 'dayjs';
import Admin from '@/apis/admin'


const showCreateModel = ref(false);

const distMapping: any = {
    admin: '管理员',
    watcher: '观察者',
    user: '用户'
}
const UserInfo = ref<UserFormState>({
    username: '',
    password: '',
    nickname: '',
    desable: 0,
    permission: '',
});

const CreateUser = () => {
    UserInfo.value = {
        username: '',
        password: '',
        nickname: '',
        desable: 0,
        permission: '',
    };
    showCreateModel.value = true
}

const UpDateUser = (User: UserFormState) => {
    UserInfo.value = { ...User };
    showCreateModel.value = true
}

const UserData = ref<UserFormState[]>([])
const GetUsers = () => {
    Admin.UserList().then((res: any) => {
        res.forEach((item: any) => {
            item.key = item.username;
        });
        UserData.value = res;
    });
}

onMounted(() => {
    GetUsers();
})

const CloseModel = () => {
    showCreateModel.value = false;
    GetUsers();
}





</script>
<style lang="less" scoped>

</style>